<template>
  <a-modal
    :title='title'
    :width='720'
    :visible='visible'
    :confirmLoading='confirmLoading'
    :footer='true'
    :maskClosable='false'
    :destroyOnClose='true'
    :centered='true'
    @cancel='cancel'
  >
    关键词搜索：
    <a-input-search
      allowClear
      style='width: 260px'
      placeholder='请输入关键词'
      enter-button
      @search='onSearch' />
    <span style='padding: 0 10px'></span>
    客户类型：
    <SelectPresalesType
      v-model='queryParam.pct_id'
      @change='getList()'
    />
    <a-spin :spinning='Loading'>
      <template v-if='list.length>0'>
        <div class='list'>
          <div v-for='item in list' :class="['item',currId==item.pc_id?'action':'']" @click='setCurr(item)'>
            <div>
              <div>客户姓名：{{ item.full_name || '-' }}</div>
              <div>身份证号：{{ item.idnumber || '-' }}</div>
              <div>公司名称：{{ item.corporate_name || '-' }}</div>
              <div>授权签约人：{{ item.signatory || '-' }}</div>
              <div>手机号码：{{ item.mobile || '-' }}</div>
              <div>客户区域：{{ item.region || '-' }}</div>
              <div>客户类型：
                <a-tooltip v-if='item.type' placement='top'>
                  <template slot='title'>
                    <span>{{ item.type.type_desc }}</span>
                  </template>
                  <a-tag>{{ item.type.type_name }}</a-tag>
                </a-tooltip>
                <span v-else>-</span></div>
            </div>
          </div>
        </div>
        <div style='display: flex;justify-content: center'>
          <a-pagination
            v-model='queryParam.page'
            @change='reaList'
            :defaultPageSize='queryParam.pageSize'
            :total='total'
            show-less-items />
        </div>
      </template>
      <template v-else>
        <div style='padding: 60px'>
          <a-empty />
        </div>
      </template>
    </a-spin>
  </a-modal>
</template>
<script>
import * as Api from '@/api/presales_customer'
import { SelectPresalesType } from '@/components'

export default {
  name: 'PresalesCustomerModel',
  components: { SelectPresalesType },
  data() {
    return {
      // 对话框标题
      title: '售前客户',
      // 标签布局属性
      labelCol: {
        span: 7
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      Loading: false,
      list: [],
      queryParam: {
        page: 1,
        pageSize: 4,
        search: '',
        pct_id: ''
      },
      total: 0,
      currId: 0
    }
  },
  methods: {
    open() {
      this.visible = true
      this.getList()
    },
    cancel() {
      this.visible = false
    },
    setCurr(item) {
      this.currId = item.pc_id
      this.$emit('handleSuccess', item)
      this.cancel()
    },

    async getList() {
      this.Loading = true
      const { data: { list } } = await Api.list(this.queryParam)
      this.list = list.data
      this.page = list.current_page
      this.total = list.total
      this.Loading = false
    },
    onSearch(keyword) {
      this.queryParam.search = keyword
      this.getList()
    },
    reaList(e) {
      this.queryParam.page = e
      this.getList()
    }
  }
}
</script>
<style scoped lang='less'>
.list {
  padding: 10px 0;

  .item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #e8e8e8;
    border-bottom: none;
    transition: all .3s;
    cursor: pointer;

    &:last-child {
      border-bottom: 1px solid #e8e8e8;
    }

    &:hover {
      background: #9dc7ee;
      //color: #ffffff;
      border-color: #9dc7ee;
    }

  }

  .action {
    background: #9dc7ee;
    color: #ffffff;
    border-color: #9dc7ee;
  }
}
</style>
